<template>
  <div class="App">
    <StuCon v-bind:stuList="stuList">
      <!-- 第二步： 通过template #插槽名=obj 接收-->
      <template #default="obj">
        <button @click="del(obj.rowData.id)">删除</button>
      </template>
    </StuCon>
    <hr />
    <StuCon v-bind:stuList="stuList2">
      <template #default="obj">
        <button @click="lookDe(obj.rowData)">查看详情</button>
      </template>
    </StuCon>
  </div>
</template>

<script>
import StuCon from "./components/StuCon.vue";
export default {
  components: {
    StuCon,
  },
  data() {
    return {
      stuList: [
        { id: 1, name: "张三" },
        { id: 2, name: "王五" },
        { id: 3, name: "李四" },
      ],
      stuList2: [
        { id: 1, name: "张三" },
        { id: 2, name: "王五" },
        { id: 3, name: "李四" },
      ],
    };
  },
  methods: {
    del(id) {
      console.log("删除id", id);
      this.stuList = this.stuList.filter(item=>item.id != id)
    },
    lookDe(rowData) {
      alert(JSON.stringify(rowData))
    },
  },
};
</script>

<style>
</style>